<template>
	<div class="userbox">
		<div class="formdata">
			<el-form :model="form" :rules="rules" ref="userForm" label-width="auto" label-position="right">
				<div class="item">
					<el-form-item :label="$t('user_data.userName')" prop="userName">
						<el-input v-model="form.userName" clearable :disabled="disabled"></el-input>
					</el-form-item>	
					<el-form-item :label="$t('user_data.statusLabel')" prop="status">
						<el-select v-model="form.status" :placeholder="$t('table_data.selectText')" :disabled="disabled">
							<el-option
								v-for="item in statusList"
								:key="item.value"
								:label="item.name"
								:value="item.value"
								>
							</el-option>
						</el-select>
					</el-form-item>
				</div>
				<div class="item">
					<el-form-item :label="$t('user_data.userTypeLabel')" prop="userType">
						<span class="el-form-item__label" v-if="userType==2">{{ $t('user_data.userType.type2') }}</span>
						<el-select v-else v-model="form.userType" :placeholder="$t('table_data.selectText')" :disabled="disabled">
							<el-option
								v-for="item in typeList"
								:key="item.value"
								:label="item.name"
								:value="item.value"
								>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('user_data.email')" prop="email" required>
						<span class="el-form-item__label">{{ form.email }}</span>
					</el-form-item>
				</div>
				<div class="item">
					<el-form-item :label="$t('user_data.form.loginType')">
						<span class="el-form-item__label" v-if="form.loginType==1">{{ $t('user_data.email') }}</span>
						<span class="el-form-item__label" v-if="form.loginType==2">{{ $t('user_data.form.google') }}</span>
					</el-form-item>
					<el-form-item :label="$t('user_data.form.eoa')">
						<span class="el-form-item__label">{{ form.eoa }}</span>
					</el-form-item>
				</div>
				<div class="item" v-if="form.userType==2">
					<el-form-item :label="$t('artwork_data.creatorName')" prop="creatorName">
						<div class="rightInput">
							<el-input v-model="form.creatorName.en_US" clearable :placeholder="$t('user_data.form.en_US')" :disabled="disabled"></el-input>
							<el-input v-model="form.creatorName.ja_JP" clearable :placeholder="$t('user_data.form.ja_JP')" :disabled="disabled"></el-input>
							<el-input v-model="form.creatorName.zh_CN" clearable :placeholder="$t('user_data.form.zh_CN')" :disabled="disabled"></el-input>
							<el-input v-model="form.creatorName.zh_TW" clearable :placeholder="$t('user_data.form.zh_TW')" :disabled="disabled"></el-input>
						</div>
					</el-form-item>
					<div class="item-right item-address el-form-item">
						<el-form-item :label="$t('user_data.form.address')">
							<el-input v-model="form.contractAddress" clearable :placeholder="$t('user_data.form.en_US')" :disabled="disabled"></el-input>
						</el-form-item>
						<el-form-item :label="$t('user_data.form.work')">
							<el-select v-model="form.professionId" :placeholder="$t('table_data.selectText')" :disabled="disabled">
								<el-option
									v-for="item in proslist"
									:key="item.id"
									:label="item.title"
									:value="item.id"
									>
								</el-option>
							</el-select>
						</el-form-item>
					</div>
				</div>
				<div class="item">
					<el-form-item :label="$t('user_data.last_name')" prop="lastName">
						<div class="rightInput">
							<el-input v-model="form.lastName.en_US" clearable :placeholder="$t('user_data.form.en_US')" :disabled="disabled"></el-input>
							<el-input v-model="form.lastName.ja_JP" clearable :placeholder="$t('user_data.form.ja_JP')" :disabled="disabled"></el-input>
							<el-input v-model="form.lastName.zh_CN" clearable :placeholder="$t('user_data.form.zh_CN')" :disabled="disabled"></el-input>
							<el-input v-model="form.lastName.zh_TW" clearable :placeholder="$t('user_data.form.zh_TW')" :disabled="disabled"></el-input>
						</div>
					</el-form-item>
					<el-form-item :label="$t('user_data.first_name')" prop="firstName">
						<div class="rightInput">
							<el-input v-model="form.firstName.en_US" clearable :placeholder="$t('user_data.form.en_US')" :disabled="disabled"></el-input>
							<el-input v-model="form.firstName.ja_JP" clearable :placeholder="$t('user_data.form.ja_JP')" :disabled="disabled"></el-input>
							<el-input v-model="form.firstName.zh_CN" clearable :placeholder="$t('user_data.form.zh_CN')" :disabled="disabled"></el-input>
							<el-input v-model="form.firstName.zh_TW" clearable :placeholder="$t('user_data.form.zh_TW')" :disabled="disabled"></el-input>
						</div>
					</el-form-item>
				</div>
				<div class="item">
					<el-form-item :label="$t('user_data.form.birth')" prop="birth">
						<el-date-picker v-model="form.birth" type="date" :disabled="disabled" :editable="false" value-format="YYYY-MM-DD" :placeholder="$t('formRule.selectPlaceholder')" :picker-options="beforeOptions"></el-date-picker>
					</el-form-item>
					<div class="phonebox">
						<el-form-item style="width: 50%" :label="$t('user_data.form.phoneCode')" prop="phoneCode">
							<el-input v-model="form.phoneCode" clearable :disabled="disabled"></el-input>
						</el-form-item>
						<el-form-item style="width: 50%;margin-left: 10px;" :label="$t('user_data.form.phone')" prop="phoneNo">
							<el-input v-model="form.phoneNo" clearable :disabled="disabled" :placeholder="$t('formRule.phoneholder')"></el-input>
						</el-form-item>
					</div>
				</div>
				<div class="item">
					<el-form-item :label="$t('user_data.sexLabel')" prop="sex">
						<el-select v-model="form.sex" :placeholder="$t('table_data.selectText')" :disabled="disabled">
							<el-option
								v-for="item in sexlist"
								:key="item.value"
								:label="item.name"
								:value="item.value"
								>
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item :label="$t('user_data.location')" prop="locale">
						<el-select v-model="form.locale" :placeholder="$t('table_data.selectText')" :disabled="disabled">
							<el-option
								v-for="item in langList"
								:key="item.value"
								:label="item.name"
								:value="item.value"
								>
							</el-option>
						</el-select>
					</el-form-item>
				</div>
				<div class="item">
					<el-form-item :label="$t('user_data.desc')" prop="introduction">
						<el-input type="textarea" rows="6" resize="none" v-model="form.introduction" clearable :disabled="disabled"></el-input>
					</el-form-item>
					<div class="item-right el-form-item">
						<el-form-item :label="$t('user_data.form.count')" prop="country">
							<el-input v-model="form.country" clearable :disabled="disabled"></el-input>
						</el-form-item>
						<el-form-item :label="$t('user_data.form.prov')" prop="prefecture">
							<el-input v-model="form.prefecture" clearable :disabled="disabled"></el-input>
						</el-form-item>
						<el-form-item :label="$t('user_data.form.city')" prop="city">
							<el-input v-model="form.city" clearable :disabled="disabled"></el-input>
						</el-form-item>
					</div>
				</div>
				<div class="item">
					<el-form-item :label="$t('user_data.head')" prop="avatar">
						<!-- <img :src="form.avatar" v-if="disabled" class="head"> -->
						<sc-upload v-model="form.avatar" :title="$t('user_data.headText')" :disabled="disabled" :autoUpload="autoUpload" :action="action" @getFile="getFile" fileType="avatar" @onSuccess="headCallBack"></sc-upload>

						<!-- <sc-upload v-else v-model="form.avatar" :action="action" :title="$t('user_data.headText')"></sc-upload> -->
					</el-form-item>
					<el-form-item :label="$t('user_data.background')" prop="background">
						<!-- <img :src="form.background" v-if="disabled" class="background"> -->
						<sc-upload v-model="form.background" width="100%" height="281px" :title="$t('user_data.backgroundText')" :disabled="disabled" :autoUpload="autoUpload" :action="action" @getFile="getFile" fileType="bgImage" @onSuccess="backCallBack"></sc-upload>
						<!-- <sc-upload v-else v-model="form.background" :title="$t('user_data.backgroundText')"></sc-upload> -->
					</el-form-item>
				</div>
				<div class="item">
					<el-form-item :label="$t('user_data.form.Twitter')" prop="snsTwitter">
						<el-input v-model="form.snsTwitter" clearable :disabled="disabled"></el-input>
					</el-form-item>
					<el-form-item :label="$t('user_data.form.Instagram')" prop="snsInstagram">
						<el-input v-model="form.snsInstagram" clearable :disabled="disabled"></el-input>
					</el-form-item>
				</div>
				<div class="item">
					<el-form-item :label="$t('user_data.form.Facebook')" prop="snsFacebook">
						<el-input v-model="form.snsFacebook" clearable :disabled="disabled"></el-input>
					</el-form-item>
					<div class="el-form-item"></div>
				</div>
			</el-form>
		</div>
		<div id="footer" v-if="!disabled">
			<!-- <el-button @click="visible=false" >{{$t('table_data.cancelText')}}</el-button> -->
			<el-button type="primary" :loading="isSaveing" @click="submit()">{{$t('table_data.saveText')}}</el-button>
		</div>
	</div>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			var checkPhoneNo = (rule, value, callback) => {
				if (!this.form.phoneNo) {
					return callback(new Error(this.$t('formRule.phoneholder')));
				} else {
					callback()
				}
			};
			var checkPhoneCode = (rule, value, callback) => {
				if (!this.form.phoneCode) {
					return callback(new Error(this.$t('formRule.phoneCode_rule')));
				} else {
					callback()
				}
			};
			var checkName = (rule, value, callback) => {
				if (this.form.lastName.en_US||this.form.lastName.ja_JP||this.form.lastName.zh_CN||this.form.lastName.zh_TW) {
					callback()
				} else {
					return callback(new Error(this.$t('formRule.leastUserName_rule')));
				}
			};
			var checkLastName = (rule, value, callback) => {
				if (this.form.firstName.en_US||this.form.firstName.ja_JP||this.form.firstName.zh_CN||this.form.firstName.zh_TW) {
					callback()
				} else {
					return callback(new Error(this.$t('formRule.leastUserName_rule')));
				}
			};
			var checkCreatorName = (rule, value, callback) => {
				if (this.form.creatorName.en_US||this.form.creatorName.ja_JP||this.form.creatorName.zh_CN||this.form.creatorName.zh_TW) {
					callback()
				} else {
					return callback(new Error(this.$t('formRule.leastUserName_rule')));
				}
			};
			return {
				mode: "add",
				action: this.$API.upload.upload,
				disabled: false,
				langList: [
					{
						name: '简体中文',
						value: 'zh_CN',
					},
					{
						name: '繁體中文',
						value: 'zh_TW',
					},
					{
						name: 'English',
						value: 'en_US',
					},
					{
						name: '日本語',
						value: 'ja_JP',
					}
				],
				typeList: [
					{
						name: this.$t('user_data.userType.type1'),
						value: 1,
					},
					{
						name: this.$t('user_data.userType.type2'),
						value: 2,
					}
				],
				statusList: [
					{
						name: this.$t('user_data.status.type1'),
						value: 0,
					},
					{
						name: this.$t('user_data.status.type2'),
						value: 1,
					},
					{
						name: this.$t('user_data.status.type3'),
						value: 2,
					},
					{
						name: this.$t('user_data.status.type4'),
						value: 9,
					}
				],
				sexlist: [
					{
						value: 'M',
						name: this.$t('user_data.sex.male'),
					},
					{
						value: 'F',
						name: this.$t('user_data.sex.female'),
					},
					{
						value: 'O',
						name: this.$t('user_data.sex.other'),
					},
				],
				titleMap: {
					add: this.$t('table_data.adduserTitle'),
					edit: this.$t('table_data.userTitle')
				},
				userType: 0,
				locationArr: [{
          value: 'ja',
          label: 'Japanese'
        }, {
          value: 'en',
          label: 'English'
        }, {
          value: 'chs',
          label: '中文简体'
        }, {
          value: 'cht',
          label: '中文繁體'
        }],
				// lastName: {
				// 	en_US: '',
				// 	ja_JP: '',
				// 	zh_CN: '',
				// 	zh_TW: '',
				// },
				// firstName: {
				// 	en_US: '',
				// 	ja_JP: '',
				// 	zh_CN: '',
				// 	zh_TW: '',
				// },
				proslist: [],
				form: {
					"creatorName": {
							"en_US": "",
							"ja_JP": "",
							"zh_CN": "",
							"zh_TW": ""
					},
					"contractAddress": null, 
					"professionName": null, 
					"userId": "",
					"eoa": "",
					"email": "",
					"userType": null,
					"loginType": null,
					"status": null,
					"firstName": {
							"en_US": "",
							"ja_JP": "",
							"zh_CN": "",
							"zh_TW": ""
					},
					"lastName": {
							"en_US": "",
							"ja_JP": "",
							"zh_CN": "",
							"zh_TW": ""
					},
					"userName": null,
					"avatarFileId": null,
					"avatar": null,
					"backgroundFileId": null,
					"background": null,
					"introduction": null,
					"sex": null,
					"phoneCode": null,
					"country": null,
					"prefecture": null,
					"city": null,
					"snsTwitter": null,
					"snsInstagram": null,
					"snsFacebook": null,
					"locale": "",
					"birth": "",
					"phoneNo": "",
				},
				rules: {
					"userName": [
						{required: true, message: this.$t('formRule.userName_rule'), trigger: 'blur'}
					],
					"sex": [
						{required: true, message: this.$t('formRule.sex_rule'), trigger: 'change'}
					],
					"status": [
						{required: true, message: this.$t('formRule.status_rule'), trigger: 'change'}
					],
					"birth": [
						{required: true, message: this.$t('formRule.birth_rule'), trigger: 'change'}
					],
					"phoneNo": [
						{required: true, validator: checkPhoneNo, trigger:'blur'}
					],
					"phoneCode": [
						{required: true, validator: checkPhoneCode, trigger:'blur'}
					],
					"last_name": [
						{required: true, validator: checkName, trigger: 'change'}
					],
					"first_name": [
						{required: true, validator: checkLastName, trigger: 'change'}
					],
					"creatorName": [
						{required: true, validator: checkCreatorName, trigger: 'change'}
					],
				},
				visible: false,
				isSaveing: false
			}
		},
		watch: {
			// 'form.userType'(e){
			// 	if(e==2)this.getProfession()
			// }
		},
		mounted(){
			this.disabled = this.$route.query.type=='detail'&&this.$route.query.id != 'add'?true:false;
			this.$store.commit("updateViewTagsTitle", this.disabled?this.$t('menu.userDetail'):this.$t('menu.userEdit'))
			if(this.$route.query.id != 'add'){
				this.getInfo()
			}
		},
		methods: {
			headCallBack(res){
				if(res&&res.code == 'OK'){
					this.form.avatarFileId = res.data.file_id
				}
			},
			backCallBack(res){
				if(res&&res.code == 'OK'){
					this.form.backgroundFileId = res.data.file_id
				}
			},
			async getInfo(){
				let id = this.$route.query.id;
				const res = await this.$API.user.userDetail.get(id);
				this.form = res.data;
				if(!this.form.creatorName)this.form.creatorName = {"en_US": "","ja_JP": "","zh_CN": "","zh_TW": ""}
				this.userType = this.form.userType;
				if(this.form.userType==2){this.getProfession()}
				// this.professionName = this.
				// const first_name = JSON.parse(this.form.first_name);
				// const last_name = JSON.parse(this.form.last_name);
				// for(let i in first_name){
				// 	this['first_name'][i] = first_name[i];
				// }
				// for(let i in last_name){
				// 	this['last_name'][i] = last_name[i];
				// }
				console.log(this.first_name,this.last_name)
			},
			async getProfession(){
				const params = {
					lang: this.$i18n.locale
				}
				const res = await this.$API.user.getProfession.get(params);
				this.proslist = res.data.map(n=>({
					...n,
					id: parseInt(n.id)
				}));
			},
			//显示
			open(mode='add'){
				this.mode = mode;
				this.visible = true;
				return this;
			},
			closeTag(){
				const tagList = this.$store.state.viewTags.viewTags;
				const tag = this.$route;
				const nowTagIndex = tagList.findIndex(item => item.fullPath == tag.fullPath)
				this.$store.commit("removeViewTags", tag)
				this.$store.commit("removeIframeList", tag)
				this.$store.commit("removeKeepLive", tag.name)

				const leftView = tagList[nowTagIndex - 1]
				if (leftView) {
					this.$router.push(leftView)
				} else {
					this.$router.push('/')
				}
			},
			//表单提交方法
			submit(){
				this.$refs.userForm.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
						var res = await this.$API.user.userUpload.post(this.form);
						this.isSaveing = false;
						if(res.code == 'OK'){
							this.$emit('success', this.form, this.mode)
							this.visible = false;
							this.$message.success(this.$t('table_data.operasucc'))
							this.closeTag()
						}else{
							this.$alert(((res.field||'') + res.message), this.$t('table_data.tips'), {type: 'error'})
						}
					}
				})
			},
		}
	}
</script>

<style scoped>
.userbox {
	background: #fff;
	padding: 30px;
	margin: 16px;
	border: 1px solid #CCCCCC;
	border-radius: 4px;
}
:deep .sc-upload__img-actions {
	left: 0;
}
.el-form {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.item {
	width: 100%;
	display: flex;
	align-items: flex-start;
}
.item-right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: space-between;
	height: 140px;
}
.el-form-item {
	width: 100%;
}
.leftlabel {
	width: 100px;
}
.leftlabel::before{
	content: "*";
	color: var(--el-color-danger);
	margin-right: 4px;
}
.item-address {
	height: 76px;
}
.phonebox {
	width: 100%;
	display: flex;
	justify-content: flex-start;
}
.el-select {
	width: 100%;
}
.item-firstName,.item-lastName {
	display: flex;
	justify-content: space-between !important;
	align-content: space-between !important;
	height: 100px;
	width: 50%;
}
.head {
	width: 150px;
  height: 150px;
}
.background {
	width: 500px;
	height: 300px;
}
.rightInput {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-content: space-between;
	height: 82px;
	width: 100%;
}
.name-item {
	margin-right: 20px;
	margin-bottom: 20px;
	width: auto;
}
.rightInput .el-input {
	width: 46%;
}
.item-left .el-form-item__content .el-input {
	width: 46%;
}
.item-right-form {
	display: flex;
}
.item>div:nth-child(2){
	margin-left: 200px;
}
#footer {
	display: flex;
	justify-content: center;
}
</style>
